<template>
	<view class="full-width col-arrange">
		<view class="title-item dashboard">
			<text class="item-name">报名主题</text><text class="item-content">{{title}}</text>
		</view>
		<view @click="searchTempletPage"  style="margin-top:10upx;margin-left:600upx">
			<view class="center-view">
				<image @click="searchTempletPage" style="height:100upx" src="../../static/templet.svg"></image>
				<text class="little-font-size">导入模板</text>
			</view>
		</view>
		<!-- <button @click="searchTempletPage" style="left:0upx;">导入模板</button> -->
		<zEnrollItemPanel :questions="questions" :isEdit="true" style="margin-top:10upx" :ref="'panel'"/>
		<button @click="lastStep" type="primary" style="width:80%;background-color:red;margin-top:10upx;">上一步</button>
		<button @click="submitEnroll" type="primary" style="width:80%;background-color:green;margin-top:10upx;">下一步</button>
	</view>
</template>


<script>
	import zEnrollItemPanel from "../../components/basic/zenrollitempanel";
	export default {
		data() {
			return {
				enrollData : {},
				title : "",
				// 用于渲染已有问题以及稍后提交数据
				questions : [],
				curId : 1
			}
		},
		components : {
			zEnrollItemPanel
		},
		onLoad(option) {
			// this.$refs.q1.question = "大象的鼻子有多长？"
			// if(option.questionStr != null){
			// 	this.questions = JSON.parse(option.questionStr);
				// this.curId = this.questions.length;
			// }
			
			var data;
			var vm = this;
			// 载入题目
			uni.getStorage({
				key : 'newEnrollDraft',
				success :function(res){
					// console.log(res.data)
					data = res.data;
					vm.enrollData = data;
					vm.title = data.title;
					vm.questions = data.content == null || data.content.length == 0 ? [] : JSON.parse(data.content);
					uni.getStorage({
						key : 'questionStr',
						success : function(re){
							vm.questions = re.data;
							uni.removeStorage({
								key : 'questionStr'
							})
						}
					})
				},
				fail : function(){
					uni.navigateTo({
						url : 'newEnrollDesc'
					})
				}
			});
			
		},
		onBackPress(options) { 
			uni.navigateTo({
				url : '../user/main'
			}) 
            return true;   
        },  
		methods: {
			searchTempletPage : function(){
				uni.navigateTo({
					url : 'searchTemplet'
				})
			},
			lastStep : function(){
				var data = this.enrollData;
				data['content'] = this.ques;
				uni.setStorage({
					key : 'newEnrollDraft',
					data : data
				});
				uni.navigateTo({
					url : 'newEnrollDesc'
				});
			},
			submitEnroll : function(){
				// console.log(this.$refs)
				this.questions = this.$refs['panel'].getQue()
				console.log(this.questions)
				if(this.questions.length == 0){
					uni.showModal({
						title : '错误',
						content : '没有一个报名项的报名是没有意义的',
						showCancel : false
					})
					return;
				}
				var data = this.enrollData;
				data['content'] = this.questions;
				uni.setStorage({
					key : 'newEnrollDraft',
					data : data
				});
				uni.navigateTo({
					url : 'newEnrollRes'
				})
			}
		}
	}
</script>

<style>
	@import "../../common/zcss.css";
	/* .input{
		width:200upx;
	} */
	.title-item{
		border-bottom: 1upx solid gray;
		border-top: 1upx solid gray;
		width: 100%;
		height:70upx;
		padding-top: 10upx;
		position: relative;
	}
	.item-name{
		position: absolute;
		left: 1%;
		color: gray;
		top:10upx;
		font-size:40upx;
	}
	.item-content{
		position: absolute;
		right: 1%;
		top:10upx;
		font-size:40upx;
	}
	/* .row-arrange{
		flex-direction: row;
	} */
	/* .enroll-view{ */
		/* width: 100%; */
		/* flex-direction: column; */
	/* }s */
	/* .center-view{
		width:100%;
		display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
	} */
	/* .new-item-view{
		background-color: aqua;
		margin-bottom: 10upx;
	} */
</style>
